<template>
  <el-dialog
    title="添加目的地"
    :visible="visible"
    :close-on-click-modal="false"
    width="70%"
    :before-close="handleClose"
  >
    <el-form ref="form" :rules="rules" :model="formData" label-width="120">
      <el-form-item label="目的节点类型" prop="SystemTypeId">
        <el-select v-model="formData.SystemTypeId" @change="typeChange">
          <el-option-group
            v-for="group in groupType"
            :key="group.Id"
            :label="group.GroupName"
          >
            <el-option
              v-for="item in group.SystemType"
              :key="item.Id"
              :label="item.TypeName"
              :value="item.Id"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="开始版本" prop="BeginVer">
        <el-option-group>
          <el-input-number
            v-model="formData.BeginVerOne"
            style="width: 120px"
            :min="0"
            :max="999"
          />
          <span>.</span>
          <el-input-number
            v-model="formData.BeginVerTwo"
            style="width: 120px"
            :min="0"
            :max="99"
          />
          <span>.</span>
          <el-input-number
            v-model="formData.BeginVerThree"
            style="width: 120px"
            :min="0"
            :max="99"
          />
        </el-option-group>
      </el-form-item>
      <el-form-item label="结束版本" prop="EndVer">
        <el-option-group>
          <el-input-number
            v-model="formData.EndVerOne"
            style="width: 120px"
            :min="0"
          />
          <span>.</span>
          <el-input-number
            v-model="formData.EndVerTwo"
            style="width: 120px"
            :min="0"
            :max="99"
          />
          <span>.</span>
          <el-input-number
            v-model="formData.EndVerThree"
            style="width: 120px"
            :min="0"
            :max="99"
          />
        </el-option-group>
      </el-form-item>
    </el-form>
    <el-row slot="footer" style="text-align: center; line-height: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="default" @click="reset">重置</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  props: {
    groupType: {
      type: Array,
      default: () => []
    },
    source: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      formData: {
        SystemTypeId: null,
        EndVerOne: null,
        EndVerTwo: null,
        EndVerThree: null,
        BeginVerThree: null,
        BeginVerTwo: null,
        BeginVerOne: null
      },
      systemType: {},
      rules: {
        SystemTypeId: [
          { required: true, message: '服务类型不能为空!', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.load()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    load() {
      this.groupType.forEach(c => {
        c.SystemType.forEach(a => {
          this.systemType[a.Id] = a
        })
      })
      this.reset()
    },
    typeChange(e) {
      const type = this.systemType[this.formData.SystemTypeId]
      const num = type.VerNum.split('.')
      this.formData.BeginVerOne = num[0]
      this.formData.BeginVerTwo = num[1]
      this.formData.BeginVerThree = num[2]
      this.formData.EndVerOne = num[0]
      this.formData.EndVerTwo = num[1]
      this.formData.EndVerThree = num[2]
    },
    handleClose() {
      this.$emit('close', null)
    },
    save() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          that.saveData()
        }
      })
    },
    saveData() {
      const type = this.systemType[this.formData.SystemTypeId]
      const def = {
        Id: type.Id,
        TypeName: type.TypeName,
        BeginVer: this.formData.BeginVerOne + '.' + this.formData.BeginVerTwo.toString().padStart(2, '0') + '.' + this.formData.BeginVerThree.toString().padStart(2, '0'),
        EndVer: this.formData.EndVerOne + '.' + this.formData.EndVerTwo.toString().padStart(2, '0') + '.' + this.formData.EndVerThree.toString().padStart(2, '0')
      }
      this.$emit('close', def)
    },
    reset() {
      if (this.source) {
        const begin = this.source.BeginVer.split('.')
        const end = this.source.EndVer.split('.')
        this.formData = {
          SystemTypeId: this.source.Id,
          EndVerOne: begin[0],
          EndVerTwo: begin[1],
          EndVerThree: begin[2],
          BeginVerThree: end[2],
          BeginVerTwo: end[1],
          BeginVerOne: end[0]
        }
      } else {
        this.formData = {
          SystemTypeId: null,
          EndVerOne: null,
          EndVerTwo: null,
          EndVerThree: null,
          BeginVerThree: null,
          BeginVerTwo: null,
          BeginVerOne: null
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select-group {
  span {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 24px;
  }
}
</style>
